//定义一个移动的转换的基数
@base:100rem;

.left {
  float: left;
}
.right{
 float:right;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ 
color:#ccc; 
font-size:12px; 
}
 
input:-moz-placeholder,textarea:-moz-placeholder{ 
color:#ccc; 
font-size:12px; 
}
 
input::-moz-placeholder,textarea::-moz-placeholder{ 
color:#ccc; 
font-size:12px; 
} 
input:-ms-input-placeholder,textarea:-ms-input-placeholder{ 
color:#ccc; 
font-size:12px; 

}
.mainSmall {
    width: 70%;
    width: -moz-calc(~"100% - 254px");
    width: -webkit-calc(~"100% - 254px");
    width: calc(~"100% - 254px");
    height: 100vh;
    // transition: width .4s linear;
  }
  .mainBig {
    width: 90%;
    width: -moz-calc(~"100% - 254px");
    width: -webkit-calc(~"100% - 254px");
    width: calc(~"100% - 254px");
    height: 100vh;
    // transition: width .4s linear;
    flex: 1;
  }
.blue{
	color:#11a7f3;
}
.menuBig,#slideMid .link-list li:last-child,#slideInformation .link-list li:last-child{
	width:200/@base;
}
.menuBig{
  // transition: width .4s linear;
}
.menuSmall{
  width:50px;
  // transition: width .4s linear;
}
#slideTop h2{
  font-size: 17/@base;
}
.box-content>h2,#slideMid h2,.header h2,#maintopLeft h2{
	color:#000;
	font-size: 20/@base;
}
.box-content .link-list li,#slideMid .link-list li{
	font-size: 16/@base;
}

#MainContentStatistics{
	font-size: 14/@base;
}

#MainContentStatistics .col-xs-1 p{
    font-size:8.2/@base;
}
#MainContentStatistics .distribute h2,.graded h2,.title h2{
	font-size: 16/@base;
	margin-bottom:30/@base;
}
.header{
  position: relative;
  width:100%;
  height:110px;
  background-color:#fff;
  border-bottom:2px solid #ccc;

}
.contentTopLeft>p{
   position: absolute;
   bottom:-2px;
   height:30px;
   line-height:30px;
   left:21%;
   border-bottom:2px solid #11a7f3;
   padding:0 15px;
}
.header h2{
  position: absolute;
    top:50%;
    transform:translateY(-70%);
    left:22%;
    font-weight:500;
    line-height:30px;
     height:30px;
     letter-spacing: 3px;
}
.contentTopLeft{
  position: relative;
  width:60%;
  height:100%;
}
.row h2>span{ 
    padding-bottom:5px;
    border-bottom:1px solid #333;
    height:30px;
    line-height:25px;
   vertical-align:top;
}
.fade-enter-active,.fade-leave-active{
  transition: opacity .5s;
}
.fade-enter,.fade-leave-active{
     opacity:0;
}
.maincontents{
   width:70%;
  width:-moz-calc(~"100% - 254px");
  width:-webkit-calc(~"100% - 254px");
  width: calc(~"100% - 254px");
  height:100vh;
}
.backTo {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 9999;
}
.backTo img {
    width: 25px;
}
.mainContent {
    position: relative;
    height: 80%;
    height: calc(~"100% - 111px");
    width: 100%;
    max-height: calc(~"100% - 111px");
    overflow-x: scroll;
}
@media screen and (min-width :1315px) {
	.box-content .link-list li,#MainContentStatistics,#slideMid .link-list li{
		font-size: 18px;
	}
	#maintopLeft h2,.header h2,#MainContentStatistics .distribute h2,#slideTop h2,#slideMid h2,.box-content>h2,.information h2,.graded h2{
	 font-size:24px;
	}
	
}
@media screen and (max-width :1260px){
.maincontents{
  width:70%;
  width:-moz-calc(~"100% - 2rem");
  width:-webkit-calc(~"100% - 2rem");
  width: calc(~"100% - 2rem");
  height:100vh;
  }
   .mainSmall {
    width: 70%;
    width: -moz-calc(~"100% - 2rem");
    width: -webkit-calc(~"100% - 2rem");
    width: calc(~"100% - 2rem");
    height: 100vh;
  }
  .contentWidth{
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  .MenuBtn{
    display: block;
  }
  .contentTopLeft{
    width: 100%;
    height: auto;
  }
  .header{
    /* padding-bottom: 15px; */
    height: auto;
  }
  .header h2{
    display: none;
    /* text-align: center;
    letter-spacing: 3px;
    left: 0;
    right: 0;
    top: 15px;
    transform:initial; */
  }
  .menuBig{
    min-width: 65.5px;
  }
}
@media screen and (max-width: 576px){
  .box-content .link-list li,#slideMid .link-list li{
    font-size: 14px;
  }
  #slideTop h2{
    font-size: 16px;
  }
  .box-content>h2,#slideMid h2,.header h2,#maintopLeft h2{
    color:#000;
    font-size: 18px;
  }
  #MainContentStatistics{
    font-size: 14px;
  }
  
  #MainContentStatistics .col-xs-1 p{
      font-size: 12px;
  }
  #MainContentStatistics .distribute h2,.graded h2,.title h2{
    font-size: 14px;
    margin-bottom: 15px;
  }
}